<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选项卡切换</title>
    <style type="text/css">
     /* CSS样式制作 */  
    *{
        margin:0;
        padding:0;
        font-family:微软雅黑;
    }   
    #box{
        padding:20px;
    }
    #box ul{
        list-style:none;
        height:40px;
    }
    #box ul li{
        float:left;
        width:60px;
        padding:8px;
        margin:0 5px;
        border:1px solid #000;
        border-bottom:0;
        text-align:center;
        cursor:pointer;/*光标形状*/
    }
    #box ul .lichange{
        border-top:3px solid #c60;
        border-bottom:3px solid #fff;
    }
    #box div{
        width:350px;
        height:120px;
        padding:8px;
        border:1px solid #00f;
        border-top:3px solid #c60;
    }
    
    .hide{
        display:none;
    }
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    window.onload=function(){ //一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本
        var li=document.getElementsByTagName("li");
        var box=document.getElementById("box");
        var div=box.getElementsByTagName("div");//声明id名为box下的所有div
        
        for (var i=0;i<li.length;i++){
            li[i].index=i;//定义index属性，对li进行编号
            li[i].onclick=function(){//注册一个点击事件当点击的时候所有标签都恢复最初状态
                for (var n=0;n<li.length;n++){
                    li[n].className="";
                    div[n].className="hide";
                }
                this.className="lichange";//再对点击事件添加相应的属性
                div[this.index].className="";//通过之前的index编号绑定的指定div
            }
        }
    }

    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="box">
    <ul>
        <li class="lichange">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
    275万购昌平邻铁三居 总价20万买一居<br />
    200万内购五环三居 140万安家东三环<br />
    北京首现零首付楼盘 53万购东5环50平<br />
    京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div class="hide">
    40平出租屋大改造 美少女的混搭小窝<br />
    经典清新简欧爱家 90平老房焕发新生<br />
    新中式的酷色温情 66平撞色活泼家居<br />
    瓷砖就像选好老婆 卫生间烟道的设计    
    </div>
    <div class="hide">
    通州豪华3居260万 二环稀缺2居250w甩<br />
    西3环通透2居290万 130万2居限量抢购<br />
    黄城根小学学区仅260万 121平70万抛!<br />
    独家别墅280万 苏州桥2居优惠价248万
    </div>
</div>

 
</body>
</html>